<template>
    <teleport to=".header">
        <SdyHeader title="注册" right="more" />
    </teleport>
    <div class="register-box">
        <!-- 进度条 -->
        <van-steps class="step-box" :active="activeCount" active-icon="success" finish-icon="checked"
            active-color="#07c160">
            <van-step>手机号</van-step>
            <van-step>验证码</van-step>
            <van-step>密码</van-step>
            <van-step>完成注册</van-step>
        </van-steps>

        <!-- 手机号 -->
        <div v-if="activeCount === 0" class="tel-box">
            <van-form @submit="activeCount = 1">
                <van-cell-group inset>
                    <van-field v-model="userInfo.tel" name="tel" autocomplete="off" label="手机号" placeholder="手机号"
                        :rules="[{ validator: testTel, trigger: 'onChange' }]" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button color="red" :disabled="disableForTel" round block type="primary" native-type="submit">
                        下一步
                    </van-button>
                </div>
            </van-form>
        </div>

        <!-- 验证码 -->
        <div v-if="activeCount === 1" class="tel-code">
            <van-form @submit="codeHandler">
                <van-cell-group inset>
                    <van-field v-model="userInfo.telcode" center clearable autocomplete="off" label="短信验证码"
                        placeholder="请输入短信验证码">
                        <template #button>
                            <van-button v-if="statusForCodeBtn" @click="sendCodeHandler" size="small"
                                type="primary">发送验证码</van-button>
                            <van-button v-else disabled size="small" type="primary">{{ timer }}(s) 以后再次发送</van-button>
                        </template>
                    </van-field>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button color="red" round block type="primary" native-type="submit">
                        下一步
                    </van-button>
                </div>
            </van-form>
        </div>

        <!-- 密码 -->
        <div v-if="activeCount === 2" class="tel-pwd">
            <van-form @submit="pwdHandler">
                <van-cell-group inset>
                    <van-field v-model="userInfo.password" name="password" label="密码" autocomplete="off" placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button color="red" :disabled="!userInfo.password" round block type="primary" native-type="submit">
                        下一步
                    </van-button>
                </div>
            </van-form>
        </div>

        <!-- 完成注册 -->
        <div v-if="activeCount === 3" class="tel-finfsh">
            <van-icon class="success" name="checked" />
            <span>完成注册</span>
        </div>


    </div>
</template>

<script name="sdyRegister" lang="ts" setup>

import SdyHeader from '../../components/header.vue'
import { ref } from 'vue'
import { showFailToast, showLoadingToast } from 'vant'
import { testTelHanlder, sendCodeHanlder, registerHanlder, testCodeHanlder } from '../../model/users'
import { useRouter } from 'vue-router'

const $myRouter = useRouter()

// 准备接口
interface User {
    tel: string
    telcode: string
    password: string
}

interface ResponseInfo {
    code?: string
    message?: string
    [key: string]: any
}

// 准备变量,表示进度条进度
const activeCount = ref<number>(0)

// 表示当前用户注册信息
const userInfo = ref<User>({ tel: '', telcode: '', password: "" })

// 手机号按钮禁用
const disableForTel = ref<boolean>(true)

// 手机号验证规则
const testTel = async (val: string) => {
    // 非空验证
    if (!val) return '请填写手机号'
    // 规则
    if (!/^\d{11}$/.test(val)) return '请填写手机号'
    // 对手机号进行验证
    const res = await testTelHanlder(val)
    if ((res as unknown as ResponseInfo).code === '10005') return '改手机号已经被注册'
    else {
        disableForTel.value = false
        return true
    }
}

// 验证码按钮禁用
const statusForCodeBtn = ref<boolean>(true)

// 验证码倒计时
let timer = ref<number>(60)

// 发送验证码
const sendCodeHandler = async () => {
    statusForCodeBtn.value = false
    // 验证码倒计时开始
    const time: number = setTimeout(() => {
        timer.value--
        // 倒计时结束
        if (timer.value <= 0) {
            clearInterval(time)
            statusForCodeBtn.value = true
        }
    }, 1000)

    const res = await sendCodeHanlder(userInfo.value.tel)
    console.log(res);

}

// 验证验证码
const codeHandler = async () => {
    const res = await testCodeHanlder(userInfo.value.tel, userInfo.value.telcode)
    if ((res as unknown as ResponseInfo).code !== '200') {
        showFailToast('验证码有误,请重试')
        return
    }
    // 继续注册
    activeCount.value = 2
}

// 提交密码
const pwdHandler = async () => {
    const res = await registerHanlder(userInfo.value.tel, userInfo.value.password)
    if ((res as unknown as ResponseInfo).code !== '200') {
        showFailToast('注册失败,请重试')
        return
    }
    activeCount.value = 3
    showLoadingToast('注册成功,即将跳转登录页')
    setTimeout(() => {
        $myRouter.push('/login')
    }, 500)

}
</script>

<style scoped lang="scss">
.register-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    >.step-box {
        width: calc(100% - 30px);
        box-sizing: border-box;
        margin-bottom: 30px;
    }

    >.tel-finish {
        width: 150px;
        height: 150px;
        background-color: #07C160;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border-radius: 20px;

        >.success {
            font-size: 80px;
            color: #fff;
            margin-bottom: 10px;
        }

        >span {
            font-size: 20px;
            color: #fff;
        }
    }
}
</style>